<template>
	<view class="l-liquid" :class="classes" :style="[styles]">
		<view class="l-liquid__inner" :style="[innerStyle]">
			<view class="l-liquid__waves" :style="[wavesStyle]">
				<view class="wave" :style="[waveStyle]"></view>
				<view class="wave two" :style="[waveStyle]"></view>
			</view>
		</view>
		<view class="l-liquid__value">
			<slot></slot>
		</view>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import {computed, ref, watch, onUnmounted, defineComponent} from './vue';
	import LiquidProps from './props';
	// import {useTransition} from '@/uni_modules/lime-use';
	const name = 'l-liquid'
	export default defineComponent({
		name,
		props: LiquidProps,
		emits: ['update:current'],
		
		setup(props, {emit}) {
			const percent = ref(0)
			const current = ref(props.percent)
			// const current = useTransition(percent, {duration: 300})
			const classes = computed(() => ({
				[name + '--outline']: props.outline
			}))
			const styles = computed(() => {
				return {
					width: props.size,
					height: props.size,
					'border-radius': props.radius,
					'background': props.background
				}
			})
			const innerStyle = computed(() => {
				return {
					'border-radius': props.radius
				}
			})
			const wavesStyle = computed(() => {
				return {
					'--l-liquid-percent':  current.value * -1 + '%'
				}
			})
			const waveStyle = computed(() => {
				return {
					background: props.waveColor
				}
			})
			let timer = null
			const stopPercent = watch(() => props.percent, (v) => {
				percent.value = v
				clearTimeout(timer)
				const step = () => {
					if(v == current.value) {
						clearTimeout(timer)
						emit('update:current', current.value)
						return 
					}
					const value = (v - current.value)
					if(value > 0) {
						current.value += 1
					}
					if(value < 0){
						 current.value -= 1
					}
					emit('update:current', current.value)
					timer = setTimeout(step, 1000 / 60)
				}
				timer = setTimeout(step, 1000 / 60)
			}, {immediate: true})
			
			// const stopCurrent = watch(current, (v) => {
			// 	emit('update:current', Math.round(v))
			// })
			// const stopPercent = watch(() => props.percent, (v) => {
			// 	percent.value = v
			// }, {immediate: true})
			
			onUnmounted(() => {
				// stopCurrent && stopCurrent()
				stopPercent && stopPercent()
			})
			
			return {
				classes,
				styles,
				innerStyle,
				wavesStyle,
				waveStyle
			}
		}
	})
	
</script>
<style lang="scss">
	@import './index';
</style>
